window.onload = function () {
  // 当点击某一个li的时候，该li添加下边线  bottomColor
  var lis = document.querySelectorAll(".aside .nav .nav li");
  var Aa = document.querySelectorAll(".aside .nav .nav li a");
  var oUl = document.querySelectorAll(".aside .nav .nav li ul");
  for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].addEventListener("click", function () {
      for (var j = 0; j < lis.length; j++) {
        lis[j].className = "";
      }
      this.className = "bottomColor";
    });
  }
  // 让a字体改变颜色
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].addEventListener("click", function () {
      for (var i = 0; i < Aa.length; i++) {
        Aa[i].classList.remove("blue");
      }
      this.classList.add("blue");
    });
  }
  // 显示与隐藏
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].onclick = function () {
      var uls = this.nextElementSibling;
      if (getComputedStyle(uls).height == "0px") {
        for (var j = 0; j < oUl.length; j++) {
          oUl[j].style.height = "0px";
        }
        uls.style.height =
          uls.children[0].offsetHeight * uls.children.length + "px";
      } else {
        uls.style.height = "0px";
      }
    };
  }
  var data = [
    {
      num: 1,
      name: "李四",
      id: 513092399809142022,
      age: "22",
      sex: "男",
      data: "2022-08-20 09:09:19",
      reason: "因病",
    },
    {
      num: 2,
      name: "张三",
      id: 513092399800142022,
      age: "28",
      sex: "男",
      data: "2022-08-21 10:09:19",
      reason: "其他原因",
    },
    {
      num: 3,
      name: "随便",
      id: 513092399859142022,
      age: "50",
      sex: "女",
      data: "2022-08-22 12:09:19",
      reason: "因病",
    },
    {
      num: 4,
      name: "王五",
      id: 813092399809142022,
      age: "23",
      sex: "男",
      data: "2022-08-23 09:09:19",
      reason: "其他原因",
    },
    {
      num: 5,
      name: "小红",
      id: 513092399809142022,
      age: "24",
      sex: "男",
      data: "2022-08-24 09:09:19",
      reason: "因病",
    },
    {
      num: 6,
      name: "小明",
      id: 113092399809142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 7,
      name: "李四",
      id: 813092399809142002,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 8,
      name: "李四",
      id: 813092399309142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 9,
      name: "李四",
      id: 813092398809142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 10,
      name: "李四",
      id: 873092399809142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 11,
      name: "李四",
      id: 913092399809142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 12,
      name: "李四",
      id: 813092369809142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 13,
      name: "李四",
      id: 813052399809142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 14,
      name: "李四",
      id: 8130923998549142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 15,
      name: "李四",
      id: 813092399209142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 16,
      name: "李四",
      id: 813092369809142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 17,
      name: "李四",
      id: 813092399809042022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 18,
      name: "李四",
      id: 813096399809142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 19,
      name: "李四",
      id: 813082399809142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 20,
      name: "李四",
      id: 613092399809142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
    {
      num: 21,
      name: "李四",
      id: 513092399809142022,
      age: "23",
      sex: "男",
      data: "2022-08-10 09:09:19",
      reason: "因病",
    },
  ];
  var page = 1;
  var count = 6;
  var searchBtn = document.querySelector(".searchBtn");
  var searchInp = document.querySelector(".searchInp");
  var oTbody = document.querySelector("tbody");
  var pagination = document.querySelector(".pagination");
  var prev = document.querySelector(".prev");
  var next = document.querySelector(".next");
  var addBtn = document.querySelector(".addBtn");
  var forms = document.querySelector(".addFrom"); //新增表单
  var inp = document.querySelectorAll(".addFrom #addModal input"); //新增下面所有的input
  var saveBtn = document.querySelector(".saveBtn");
  function application() {
    // 搜索
    var contents = searchInp.value;
    // console.log(contents);
    // alert(contents)
    var contentsArr = [];
    for (var i = 0; i < data.length; i++) {
      if (contents.trim() == "") {
        contentsArr = data;
      } else {
        if (
          data[i].name.includes(contents) ||
          data[i].reason.includes(contents) ||
          data[i].sex.includes(contents) ||
          data[i].age.includes(contents)
        ) {
          contentsArr.push(data[i]);
        }
      }
    }
    // 数据的插入
    oTbody.innerHTML = "";
    var addArr = contentsArr.slice((page - 1) * count, page * count);
    for (var i = 0; i < addArr.length; i++) {
      var oTr = document.createElement("tr");
      oTr.innerHTML = `
        <td>${addArr[i].num}</td>
        <td>${addArr[i].name}</td>
        <td>${addArr[i].id}</td>
        <td>${addArr[i].age}</td>
        <td>${addArr[i].sex}</td>
        <td>${addArr[i].data}</td>
        <td>${addArr[i].reason}</td>
        <td>
            <button type="button" class="btn btn-info detail" data-toggle="modal" data-target="#detailModal">编辑</button>
            <button type="button" class="btn btn-danger delete">删除</button>
        </td>
        `;
      oTbody.appendChild(oTr);
    }
    // 页码的插入
    var pageBtn = document.querySelectorAll(".pageBtn");
    // 删除所有的页码
    for (var i = 0; i < pageBtn.length; i++) {
      pagination.removeChild(pageBtn[i].parentNode);
    }
    // 根据数据的长度重新添加页码
    for (var i = 1; i <= Math.ceil(contentsArr.length / count); i++) {
      var oLi = document.createElement("li");
      oLi.innerHTML = `<a href="#" class="pageBtn">${i}</a></li>`;
      if (i == page) {
        oLi.classList.add("active");
      }
      pagination.insertBefore(oLi, pagination.lastElementChild);
    }
  }
  application();
  // 当点击搜索按钮的时候
  searchBtn.addEventListener("click", function () {
    page = 1;
    application();
  });
  // 当按下回车键的时候
  searchInp.addEventListener("keyup", function () {
    // console.log(keyCode);
    if (event.keyCode == 13) {
      page = 1;
      application();
    }
    event.preventDefault();
  });
  //  当点击分页按钮的时候
  pagination.addEventListener("click", function () {
    if (event.target.className == "pageBtn") {
      page = event.target.innerText;
      application();
    }
  });
  prev.addEventListener("click", function () {
    if (page > 1) {
      page--;
      application();
    }
  });
  next.addEventListener("click", function () {
    if (page < Math.ceil(data.length / count)) {
      page++;
      application();
    }
  });
  // 表单验证
  var rules = {
    // 账号
    num: {
      reg: /^\d{1,5}$/,
      info: "请输入正确的账号信息",
    },
    // 姓名
    name: {
      reg: /^([\u4e00-\u9fa5]{2,6})$/,
      info: "请输入2-6位中文姓名",
    },
    // 身份证号码
    idCard: {
      reg: /^\d{15}|\d{}18$ /,
      info: "请正确输入您的身份证号码",
    },
    // 年龄
    age: {
      reg: /^([0-9]\d|100)$/,
      info: "年龄过大",
    },
    // 性别
    sex: {
      reg: /^[男|女]{1}$/,
      info: "请输入“男”或者“女”",
    },
    // 死亡原因
    reason: {
      reg: /^([\u4e00-\u9fa5]{2,34})$/,
      info: "请输入死亡原因",
    },
    // 死亡时间
    data: {
      reg: /^(?:19|20)[0-9][0-9]-(?:(?:0[1-9])|(?:1[0-2]))-(?:(?:[0-2][1-9])|(?:[1-3][0-1])) (?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]:[0-5][0-9]$/,
      info: "格式有误：2022-08-21 09:10:02",
    },
  };
  // 当表单里的input失去焦点的时候
  for (var i = 0; i < inp.length; i++) {
    inp[i].addEventListener("blur", function () {
      var str = this.value;
      if (str.trim() == "") {
        this.parentNode.nextElementSibling.innerHTML = "内容不能为空";
        this.parentNode.nextElementSibling.classList.add("red");
      } else if (rules[this.name].reg.test(str) == false) {
        this.parentNode.nextElementSibling.innerHTML = rules[this.name].info;
        this.parentNode.nextElementSibling.classList.add("red");
      } else {
        this.parentNode.nextElementSibling.innerHTML = "√";
        this.parentNode.nextElementSibling.classList.add("right");
      }
    });
  }
  // 当提交表单的时候
  forms.addEventListener("submit", function () {
    var temp = true;
    for (var j = 0; j < inp.length; j++) {
      var str = inp[j].value;
      if (str.trim() == "") {
        inp[j].parentNode.nextElementSibling.innerHTML = "内容不能为空";
        inp[j].parentNode.nextElementSibling.classList.add("red");
        temp = false;
      } else if (rules[this.name].reg.test(str) == false) {
        inp[j].parentNode.nextElementSibling.innerHTML =
          rules[inp[j].name].info;
        inp[j].parentNode.nextElementSibling.classList.add("red");
        temp = false;
      } else {
        inp[j].parentNode.nextElementSibling.innerHTML = "√";
        inp[j].parentNode.nextElementSibling.classList.add("right");
      }
    }
    if (temp == false) {
      event.preventDefault();
      $("#addModal").modal("show"); // 隐藏模态框
    }
  });
  oTbody.addEventListener("click", function () {
    // 删除
    if (event.target.className.includes("delete")) {
      var id = event.target.parentNode.parentNode.children[0].innerText; //根据id删除相应的行
      // console.log(id);
      // 循环遍历拿到所有的数据
      for (var i = 0; i < data.length; i++) {
        // 如果点击的元素和该行的id相同，那么就删除这一行
        if (data[i].num == id) {
          var confirms = confirm("确认删除" + data[i].name + "吗?");
          if (confirms) {
            data.splice(i, 1); //data是数组对象
          }
        }
      }
      application();
    }
  });
  // 当点击新增的时候
  addBtn.addEventListener("click", function () {
    var addId = document.querySelector(".addId").value;
    var addName = document.querySelector(".addName").value;
    var addCard = document.querySelector(".addCard").value;
    var addAge = document.querySelector(".addAge").value;
    var addSex = document.querySelector(".addSex").value;
    var addData = document.querySelector(".addData").value;
    var addReason = document.querySelector(".addReason").value;
    data.push({
      num: addId,
      name: addName,
      id: addCard,
      age: addAge,
      sex: addSex,
      data: addData,
      reason: addReason,
    });
    application();
    $("#addModal").modal("hide");
  });
  // 当点击编辑的时候
  oTbody.addEventListener("click", function () {
    if (event.target.className.includes("detail")) {
      var id = event.target.parentNode.parentNode.children[0].innerText;
      // console.log(id);
      for (var i = 0; i < data.length; i++) {
        if (data[i].num == id) {
          document.querySelector(".editId").value = data[i].num;
          document.querySelector(".editName").value = data[i].name;
          document.querySelector(".editCard").value = data[i].id;
          document.querySelector(".editAge").value = data[i].age;
          document.querySelector(".editSex").value = data[i].sex;
          document.querySelector(".editReason").value = data[i].reason;
          document.querySelector(".editData").value = data[i].data;
        }
      }
    }
  });
  //  当点击保存的时候
  saveBtn.addEventListener("click", function () {
    var id = document.querySelector(".editId").value;
    for (var i = 0; i < data.length; i++) {
      if (data[i].num == id) {
        data[i].num = document.querySelector(".editId").value;
        data[i].name = document.querySelector(".editName").value;
        data[i].id = document.querySelector(".editCard").value;
        data[i].age = document.querySelector(".editAge").value;
        data[i].sex = document.querySelector(".editSex").value;
        data[i].data = document.querySelector(".editData").value;
        data[i].reason = document.querySelector(".editReason").value;
      }
    }
    $("#detailModal").modal("hide");
    application();
  });
};
